/* components */
import { SettingGPTViewDialog } from "@gpt/components";
import SettingGPTManageViewTable from "@gpt/views/manage/table";
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* hooks */
import { useSettingGPTManageList } from "@gpt/hooks";
/* model */
import { SettingGPTQuestionLogListFields, SettingGPTRobotModelModules } from "@gpt/model";
/* vue */
import { defineComponent, PropType } from "vue";
/* types */
import { SettingGPTRobotModuleType } from "@gpt/types";
import Column from "@model/types/Column";
/* utils */
import { settingListFieldsToColumns } from "@gpt/utils";

type SettingGPTManageViewTableComponentType = InstanceType<typeof SettingGPTManageViewTable>
type SettingGPTViewDialogComponentType = InstanceType<typeof SettingGPTViewDialog>

enum SettingGPTHomeViewLogDialogEventEnum {
  Input = 'input',
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTHomeViewLogDialog,
  props: {
    value: {
      type: String as PropType<String>,
      default: '',
    },
    onInput: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
    const {
      loading,
      dataList,
      page,
      active,
      isQuestionListActive,
      isStandActive,
      isLogActive,
      keyword,
      setKeyword,
      setLogActive,
      setActive,
      onKeywordChangeHandler,
      onTabChangeHandler,
      initialize,
      onSetPageNumHandler,
      onSetPageSizeHandler,
      onDeleteQuestionHandler,
      onDeleteBatchQuestionHandler
    } = useSettingGPTManageList()
    
    return {
      loading,
      dataList,
      page,
      active,
      isQuestionListActive,
      isStandActive,
      isLogActive,
      keyword,
      setKeyword,
      setLogActive,
      setActive,
      onKeywordChangeHandler,
      onTabChangeHandler,
      initialize,
      onSetPageNumHandler,
      onSetPageSizeHandler,
      onDeleteQuestionHandler,
      onDeleteBatchQuestionHandler
    }
  },
  data() {
    return {
      modules: SettingGPTRobotModelModules
    }
  },
  computed: {
    attrs(): Record<string, any> {
      return {
        directives: [
          {
            name: 'loading',
            value: this.loading
          }
        ]
      }
    },
    columns(): Column[] {
      const fields = SettingGPTQuestionLogListFields
      return settingListFieldsToColumns(fields)
    },
    moduleList(): SettingGPTRobotModuleType[] {
      return this.modules
    },
    settingGPTViewDialogComponent(): SettingGPTViewDialogComponentType {
      return this.$refs.SettingGPTViewDialog as SettingGPTViewDialogComponentType
    },
    settingGPTManageViewTableComponent(): SettingGPTManageViewTableComponentType {
      return this.$refs.SettingGPTManageViewTable as SettingGPTManageViewTableComponentType
    }
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {
    openDialog() {
      this.setLogActive()
      this.initialize()
      this.settingGPTViewDialogComponent.open()
    },
    closeDialog() {
      this.settingGPTViewDialogComponent.close()
    },
    onInputHandler(value: string) {
      this.$emit(SettingGPTHomeViewLogDialogEventEnum.Input, value)
    },
    renderHeader() {
      return (
        <div class="setting-gpt-home-view-log-dialog-header">
          <div class="setting-gpt-home-view-log-dialog-header-input">
            <el-input
              class="setting-gpt-home-view-log-dialog-header-input"
              placeholder="搜索问题"
              prefix-icon="el-icon-search"
              clearable
              value={this.keyword}
              onInput={this.onKeywordChangeHandler}
            >
            </el-input>
          </div>
          <div class="setting-gpt-home-view-log-dialog-header-info">
            <i class="iconfont icon-info"></i>
            <span class="setting-gpt-home-view-log-dialog-header-info-text">
              访问日志会记录所有用户的问题及回答
            </span>
          </div>
        </div>
      )
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTHomeViewLogDialog}>
        <SettingGPTViewDialog
          width="900px"
          title="查看日志"
          ref="SettingGPTViewDialog"
          className={ComponentNameEnum.SettingGPTHomeViewLogDialog}
        >
          
          { this.renderHeader() }
          
          <SettingGPTManageViewTable
            ref="SettingGPTManageViewTable"
            {...this.attrs}
            columns={this.columns}
            page={this.page}
            value={this.dataList}
            active={this.active}
            showTableSelection={false}
            onChangePageNum={this.onSetPageNumHandler}
            onChangePageSize={this.onSetPageSizeHandler}
            onDelete={this.onDeleteQuestionHandler}
          >
          </SettingGPTManageViewTable>
          
        </SettingGPTViewDialog>
      </div>
    )
  }
});